<template>
<h1>杨硕El-日期时间选择器组件</h1>
  <el-date-picker type="date" v-model="rq"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="console.log(rq)">
  </el-date-picker>
  <el-date-picker type="datetime" v-model="sj"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="console.log(sj)">
  </el-date-picker>
  <el-date-picker type="datetimerange" v-model="times"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="f"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  range-separator="到">
  </el-date-picker>
</template>
<script setup>
import {ref} from "vue";

//定义变量用来保存收集到的日期
const rq = ref('');
//定义变量用来保存收集到的日期与时间
const sj = ref('');
//定义数组用来保存起止时间
const times = ref([]);
const f=()=>{
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
const datetimerange=() => {
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
</script>


<style scoped>

</style>